<template>
    <div>
        <h1>组件传值小练习</h1>
       
        <Boy @handleBoy="handleBoy" :moneyBoy="moneyBoy"></Boy>
        <Girl @handleGirl="handleGirl" :moneyGirl="moneyGirl"></Girl>
        <h3>以下是爸爸的行为：</h3>
        看到了孩子们的成绩：女儿的是{{gradeGirl}}，儿子的是{{ gradeBoy }},
        平均分为:{{ (gradeBoy+gradeGirl)/2 }}<br>
        我的金库里有{{ store.count }}元
        <br>给成绩好的发点钱
        <button @click="send(100)">发钱</button>

    </div>
</template>
<script setup>
import Girl from "../components/Girl.vue";
import Boy from '../components/Boy.vue';
import { ref } from 'vue'
import useCounterStore from "../stores/counter";
const store = useCounterStore()
const gradeBoy = ref(0)
const gradeGirl = ref(50)
const handleBoy = (val)=>{
    gradeBoy.value = val.data
}
const handleGirl = (val)=>{
    gradeGirl.value = val.data
}
//创建两个变量，用来放置奖励的钱
const moneyBoy = ref(0)
const moneyGirl = ref(0)
const send = (val)=>{
    //判断谁成绩高给谁钱，对成绩进行比较，但前提是被发钱的孩子要及格
    if(gradeBoy.value-gradeGirl.value>0 && gradeBoy.value>=60){
        moneyBoy.value += val
    }
    else if(gradeGirl.value - gradeBoy.value >0 && gradeGirl.value>=60){
        moneyGirl.value += val
    }
    else if(gradeBoy.value =gradeGirl.value && gradeBoy.value>=60){
        moneyBoy.value += val
        moneyGirl.value += val
    }
    else{
        alert('考试不及格还想要奖励！！！！！！！！！！！！！！')
    }
}

</script>